<template>
	<hxt-layout id="hxt-layout" title="小杨工具库" svc="main" initTitle="用户加载失败">
		<view class="hxt-flex-column page-container">
			<!-- <tn-notice-bar :show="notice.show" :data="[notice.msg]" auto-hidden text-color="#1989fa" bg-color="#ecf9ff"
			left-icon="sound" :right-icon="notice.closeable?'close':''" @click="copy(notice.msg_key)"
			:speed="notice.speed" left-icon-color="#1989fa" @right-icon-click="notice.show=false" :loop="true"
			:direction="horizontal"></tn-notice-bar> -->
			<van-notice-bar v-if="!!notice.msg" left-icon="volume-o" :text="notice.msg" color="#1989fa"
				background="#ecf9ff" :scrollable="!!notice.scrollable" :mode="notice.closeable?'closeable':''"
				:speed="notice.speed" @click="copy(notice.msg_key)">
				<template #right-icon v-if="currentUser.root!=8">
					<div @click.stop="dingyue" class="color-orange padding-left">
						订阅消息
					</div>
				</template>
			</van-notice-bar>
			<view class="hxt-flex-fill" style="height: 1px;">
				<scroll-view scroll-y class="scrollPage" style="height: 100%;">
					<view class="squirtle">
						  <view class="tail"></view>
						  <view class="body">
							    <view class="stomach"></view>
							    <view class="shell"></view>
							  </view>
						  <view class="head">
							    <view class="eye"></view>
							    <view class="eye"></view>
							    <view class="mouth"></view>
							  </view>
						  <view class="leg back"></view>
						  <view class="leg"></view>
						  <view class="arm back"></view>
						  <view class="arm"></view>
					</view>
					<view class="list-container">
						<view v-for="(item, index) in menuList" :key="index" class="list-item">
							<view class="list-title">
								<view style="position: relative;height: -webkit-fit-content;height: fit-content;">
									<view class="tn-text-ellipsis-1 text-blue" style="text-align: left;width: 100%;
    z-index: 1;padding-bottom: 10rpx;font-size: 38rpx;position: relative;">
										<view
											style="display: -webkit-box;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;-webkit-line-clamp: 1;-webkit-box-orient: vertical!important;width: 100%;">
											{{item.name}}
										</view>
										<view style="position: absolute;
									left: 8rpx;
									top: 20%;
									z-index: -1;
									display: inline-block;
									white-space: nowrap;color: #b3ecff;">{{item.name}}</view>

									</view>
								</view>
							</view>
							<view class="content-container">
								<view v-for="(dItem, dIndex) in item.children" :key="dIndex" class="content-item"
									@click="open(dItem.url)">
									<view :class="['bg','tn-gradient-bg__'+dItem.color+'-light']" />
									<view class="data hxt-flex-column">
										<view class="title tn-text-ellipsis-1 hxt-flex-fill">{{ dItem.name }}</view>
										<view class="path text-gray tn-text-ellipsis-1">
											<!-- <tn-icon name="code" /> -->
											<text>{{ dItem.state }}</text>
										</view>
										<view class="icon text-gray">
											<text :class="'tn-icon-'+dItem.icon"></text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</hxt-layout>
</template>

<script>
	import * as hxt from "@/utils/hxt.js";
	export default {
		name: "hxt-main",
		options: {
			styleIsolation: 'apply-shared'
		},
		props: {
			menuList: {
				type: Array,
				default: []
			}
		},
		data() {
			const app = getApp();
			return {
				notice: {
					msg: '',
					msg_key: '',
					scrollable: 0,
					speed: 60,
					closeable: 0,
					show: false
				},
				currentUser: app.globalData.currentUser,
				mainSwitch: false,
			};
		},
		created() {
			var _this = this;
			hxt.post({
				url: hxt.domain + 'wx/noticeOne',
				data: {},
				ok: function(res) {
					if (res.data.code != 0) return;
					if (!res.data.data) return;
					_this.notice.msg = res.data.data.msg;
					_this.notice.msg_key = res.data.data.msg_key;
					_this.notice.scrollable = res.data.data.scrollable;
					_this.notice.speed = res.data.data.speed;
					_this.notice.closeable = res.data.data.closeable;
					_this.notice.show = true;
				}
			});									
		},
		methods: {
			dingyue: function() {
				var _this = this;
				hxt.post({
					url: hxt.domain + 'wx/wxTemplateIdlist',
					data: {},
					ok: function(res) {
						if (res.data.code != 0) return hxt.Notify({
							type: 'danger',
							message: '加载失败：' + res.data.errmsg
						});
						var list=res.data.data.map(function(item){return item.id});
						wx.requestSubscribeMessage({
							tmplIds: list,
							success: function(res) {
								// if (JSON.stringify(res).indexOf("reject") != -1) {
								// 	console.log("拒绝")
								// }
								// if (JSON.stringify(res).indexOf("accept") != -1) {
								// 	// console.log("接受")
								// 	wx.getSetting({
								// 		withSubscriptions: true,
								// 		success(res) {
								// 			// console.log(res.subscriptionsSetting);
								// 			// if (JSON.stringify(res.subscriptionsSetting).indexOf(
								// 			// 		'ZldooaxafKj5aZn9bzflwJovQ0fG0_Zpfk1EY13bEqo') != -1) {
								// 			// 	// console.log("用户选择了“保持以上选择")
								// 			// 	wx.setStorageSync("subscriptionsSetting", JSON.stringify(res.subscriptionsSetting));
								// 			// 	_this.mainSwitch =true;
								// 			// }
								// 		}
								// 	})
								// }
							}
						});
					},
					fail: function(err) {
						hxt.alert(err);
					
					}
				});
				
			},
			open: function(url) {
				wx.navigateTo({
					url: url,
					success: function() {

					},
					fail: function(err) {
						hxt.alert(err.errMsg);

					}
				})
			},
			send: function() { //发送微信订阅信息
				hxt.alert(err.errMsg);
				wx.requestSubscribeMessage({
					tmplIds: ['ZldooaxafKj5aZn9bzflwJovQ0fG0_Zpfk1EY13bEqo'],
					success(res) {
						hxt.post({
							url: "https://api.weixin.qq.com/cgi-bin/token",
							data: {
								appid: "wxc951eaa62e628b5b",
								secret: "2ad75d1992c8e37919048852e8b834b3",
								grant_type: "client_credential"
							},
							ok: function(res) {
								console.log(res)

								wx.request({
									url: "https://api.weixin.qq.com/cgi-bin/message/subscribe/send?access_token=" +
										res.data.access_token,
									method: "POST",
									data: {
										template_id: 'ZldooaxafKj5aZn9bzflwJovQ0fG0_Zpfk1EY13bEqo',
										page: 'pages/index/index',
										touser: _this.currentUser.openId,
										data: {
											character_string1: {
												DATA: 'sadasd',
												value: 'sdsadsa'
											},
											thing2: {
												DATA: 'fdgs',
												value: "广州至北京"
											},
										},
									},
									header: {
										'content-type': 'application/json' // 默认值
									},
									success(res) {
										console.log(res.data)
									}
								});
								return
								hxt.post({
									url: "https://api.weixin.qq.com/cgi-bin/message/subscribe/send?access_token=" +
										res.data.access_token,
									responseType: 'json',
									data: {
										template_id: 'ZldooaxafKj5aZn9bzflwJovQ0fG0_Zpfk1EY13bEqo',
										page: 'index/index',
										touser: _this.currentUser.openId,
										data: JSON.stringify({

											character_string1: {
												value: 1
											},
											thing2: {
												value: "广州至北京"
											},
										}),
									},
									ok: function(res) {
										console.log(res);
									}
								});
							}
						});
					}
				})
			},
			copy: function(url) {
				var _this = this;
				hxt.post({
					url: hxt.domain + 'wx/getLoginKey',
					data: {},
					ok: function(res) {
						if (res.data.code != 0) return hxt.Notify({
							type: 'danger',
							message: '参数获取失败：' + res.data.errmsg
						});
						if (!res.data.data) return hxt.Notify({
							type: 'danger',
							message: '参数获取失败：无效的参数'
						});
						wx.setClipboardData({
							data: url + '/' + res.data.data,
							success(res) {
								hxt.Notify({
									type: 'success',
									message: '链接已复制到剪贴板，请粘贴到浏览器打开'
								});
							}
						})
					}
				});

			},
		}
	}
</script>


<style lang="scss">
	[is="wxcomponents/vant/icon/index"] {
		display: initial;
		text-align: right;
	}

	.tn-text-ellipsis-1 {
		display: -webkit-box;
		overflow: hidden;
		text-overflow: ellipsis;
		word-wrap: break-word;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical !important;
	}

	.page-container {
		position: relative;
		width: 100%;
		min-height: 100%;

		/* 顶部轮播图 start */
		.top-swiper {
			position: relative;
			width: 100%;
			height: 680rpx;

			.swiper-container,
			.swiper-item,
			.image {
				width: auto;
				height: 100%;
				will-change: transform;
			}
		}

		/* 顶部轮播图 end */

		/* 列表容器 start */
		.list-container {
			position: relative;
			width: 100%;
			padding: 30rpx;

			/* 列表Item start */
			.list-item {
				position: relative;
				width: 100%;
				margin-top: 60rpx;

				&:first-of-type {
					margin-top: 20rem;
				}

				// 标题
				.list-title {
					position: relative;

					padding-left: 26rpx;

					&::before {
						content: '';
						position: absolute;
						left: 0;
						top: 50%;
						width: 10rpx;
						height: 70%;
						border-radius: 100rpx;
						background-color: #01beff;
						transform: translateY(-58%);
					}
				}

				// 提示
				.list-tips {
					margin-top: 20rpx;
					text-align: justify;
					font-size: 32rpx;
					font-weight: 600;
				}

				/* 列表项 start */
				.content-container {
					position: relative;
					width: 100%;
					display: flex;
					flex-wrap: wrap;

					.content-item {
						flex-grow: 0;
						flex-shrink: 0;
						position: relative;
						width: calc(100% / 2 - 16rpx);
						height: 117rpx;
						margin-top: 30rpx;

						opacity: 0;
						animation: list-item-enter-animation 0.3s ease forwards;

						&:nth-of-type(odd) {
							margin-right: 30rpx;
						}

						.bg {
							position: absolute;
							left: 0;
							top: 0;
							width: 100%;
							height: 100%;
							mask: url('');
							mask-size: 100% 100%, contain;
							mask-repeat: no-repeat;
							mask-composite: xor;
							z-index: 1;
						}

						/* 数据 start */
						.data {
							position: relative;
							width: 100%;
							height: 100%;
							z-index: 2;
							padding: 10rpx 30rpx;
							padding-top: 14rpx;

							.title {
								font-size: 35rpx;
								width: 90%;
								vertical-align: middle;
							}

							.path {
								margin-top: 8rpx;
								width: 80%;

								// text {
								// 	margin-left: 10rpx;
								// }
							}

							.icon {
								position: absolute;
								bottom: 0;
								right: 0;
								width: 60rpx;
								height: 60rpx;
								border-radius: 50%;
								display: flex;
								align-items: center;
								justify-content: center;
								font-size: 36rpx;
							}
						}

						/* 数据 end */
					}
				}

				/* 列表项 end */
			}

			/* 列表Item end */
		}

		/* 列表容器 end */
	}

	/* 入场动画 start */
	@keyframes list-item-enter-animation {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	/* 入场动画 end */



	//    以下都是 杰尼龟
	.squirtle {
		margin: auto;
		height: 20rem;
		animation: bounce 250ms infinite linear alternate;
		position: fixed;
		width: 100%;
	}

	.squirtle::after {
		content: "";
		position: absolute;
		z-index: -10;
		bottom: 0;
		left: 50%;
		width: 60%;
		height: 20%;
		margin-left: -30%;
		background-color: rgba(0, 0, 0, 0.05);
		border-radius: 50%;
		animation: bounce 250ms infinite linear alternate-reverse;
	}

	.body {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 6em;
		height: 6em;
		margin: 4em 0 0 -1em;
		transform: translate(-50%, -50%);
		overflow: hidden;
		background-color: #fe9;
		border: 0.375em solid #555;
		border-radius: 10% 10% 50% 50% / 50%;
	}

	.body::before,
	.body::after {
		content: "";
		position: absolute;
		z-index: 1;
		top: 2.25em;
		left: -1em;
		width: 1.25em;
		height: 1.5em;
		transform: rotate(55deg);
		background-color: #fe9;
		border: 0.25em solid #555;
		border-radius: 10%;
	}

	.body::after {
		z-index: 0;
		top: 4.825em;
		left: 1.375em;
		height: 1.25em;
		transform: skewX(10deg) rotate(40deg);
		box-shadow: 0.375em -3.375em #fe9, 0.125em -3.0625em #555;
	}

	.stomach {
		position: absolute;
		bottom: 3.25em;
		left: -1.125em;
		width: 115%;
		height: 100%;
		border: 0.25em solid transparent;
		border-bottom-color: #555;
		border-radius: 50%;
		box-shadow: 0 1.25em #fe9, 0 1.5em #555;
	}

	.stomach::before {
		content: "";
		position: absolute;
		bottom: -4.125em;
		left: 2.25em;
		width: 40%;
		height: 100%;
		transform: rotate(-10deg);
		border: 0.25em solid transparent;
		border-left-color: #555;
		border-radius: 50%;
	}

	.shell {
		position: absolute;
		top: 0;
		left: 0.25em;
		z-index: 1;
		width: 100%;
		height: 115%;
		border-radius: 10% 10% 50% 50% / 50%;
		box-shadow: inset -0.5em 0 #953, inset -1em 0 #a63, inset -1.25em 0 #555,
			inset -1.75em 0 #fff, inset -2em 0 #555;
	}

	.tail {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 4.5em;
		height: 5.5em;
		margin: 0.25em 0 0 -0.5em;
		transform-origin: 2.5em 100%;
		background-color: #6bc;
		border: 0.325em solid #555;
		border-radius: 50%;
		animation: bounce2 250ms infinite linear alternate;
	}

	.tail::before,
	.tail::after {
		content: "";
		position: absolute;
		top: -2em;
		left: 2.25em;
		width: 5em;
		height: 5.5em;
		background-color: inherit;
		border: 0.325em solid #555;
		border-left-color: transparent;
		border-radius: 50%;
	}

	.tail::after {
		top: 0.375em;
		left: 2.625em;
		width: 2.5em;
		height: 2.75em;
		transform: translateX(1%);
		background-color: transparent;
		border: 0.325em solid #555;
		border-right-color: transparent;
		border-bottom-color: transparent;
	}

	.head {
		position: absolute;
		z-index: 1;
		top: 50%;
		left: 50%;
		width: 10em;
		height: 10em;
		margin: -8.25em 0 0 -5.5em;
		background-color: #7cd;
		border: 0.325em solid #555;
		border-radius: 50%;
		animation: bounce2 250ms infinite linear alternate;
	}

	.head::before {
		content: "";
		position: absolute;
		bottom: -0.0625em;
		right: 1.625em;
		width: 8.25em;
		height: 5em;
		transform: rotate(10deg);
		background-color: inherit;
		border-radius: 50%;
		box-shadow: 0 0 0 0.325em #555;
	}

	.head::after {
		content: "";
		position: absolute;
		width: 100%;
		height: 100%;
		background-color: inherit;
		border-radius: 50%;
		box-shadow: inset -0.5em 0.25em #6bc;
	}

	.eye {
		position: absolute;
		z-index: 1;
		top: 5em;
		left: 4em;
		width: 2em;
		height: 2.825em;
		overflow: hidden;
		background-color: #555;
		border: 0.1875em solid #555;
		border-radius: 50% / 60% 60% 40% 40%;
		box-shadow: inset 0 -0.375em #a63;
	}

	.eye::before {
		content: "";
		position: absolute;
		top: 0.375em;
		right: 0.25em;
		width: 30%;
		height: 30%;
		background-color: #fff;
		border-radius: 50%;
	}

	.eye:first-child {
		top: 4em;
		left: 0.5em;
		width: 1.5em;
		height: 2.25em;
		border: 0.125em solid #555;
		box-shadow: inset 0 -0.25em #a63;
	}

	.mouth {
		position: absolute;
		z-index: 1;
		bottom: 0.75em;
		left: 2em;
		width: 1.125em;
		height: 1.75em;
		background-color: #fcc;
		border: 0.125em solid #555;
		border-radius: 50%;
		box-shadow: inset 0 1.125em 0 -0.0625em #f55, inset 0 1.1875em #555;
	}

	.mouth::before {
		content: "";
		position: absolute;
		top: -0.25em;
		right: -0.825em;
		width: 3em;
		height: 1em;
		transform: rotate(20deg);
		background-color: #7cd;
		border: 0.125em solid transparent;
		border-bottom-color: #555;
		border-radius: 50%;
	}

	.mouth::after {
		content: "";
		position: absolute;
		top: -6.5em;
		right: -0.825em;
		width: 2em;
		height: 2em;
		transform: rotate(-20deg) scaleY(0.75);
		background-color: rgba(255, 255, 255, 0.25);
		border-radius: 50%;
		box-shadow: -1.5em 0.5em 0 -0.625em rgba(255, 255, 255, 0.25),
			-4.125em 4.5em 0 -0.625em rgba(255, 200, 200, 0.8),
			0.75em 10em 0 -0.5em rgba(255, 200, 200, 0.8);
	}

	.leg {
		position: absolute;
		z-index: 0;
		top: 50%;
		left: 50%;
		width: 2.5em;
		height: 3em;
		margin: 5.25em 0 0 -1em;
		transform-origin: 50% 1em;
		background-color: #7cd;
		border: 0.325em solid #555;
		border-radius: 50% / 50% 50% 50% 30%;
		animation: swing 500ms infinite linear alternate;
	}

	.leg::before {
		content: "";
		position: absolute;
		bottom: -0.325em;
		right: 0.325em;
		width: 2.25em;
		height: 1.5em;
		transform: rotate(15deg);
		background-color: inherit;
		border: 0.325em solid #555;
		border-radius: 50% 50% 50% 50% / 80% 50% 50% 30%;
	}

	.leg::after {
		content: "";
		position: absolute;
		width: 100%;
		height: 100%;
		background-color: inherit;
		border-radius: 50% / 50% 50% 50% 30%;
		box-shadow: inset -0.375em 0.25em #6bc;
	}

	.leg.back {
		z-index: -1;
		width: 2.25em;
		height: 2.75em;
		margin: 5em 0 0 -3.75em;
		background-color: #6bc;
		animation-delay: -500ms;
	}

	.arm {
		position: absolute;
		z-index: 0;
		top: 50%;
		left: 50%;
		width: 2em;
		height: 3em;
		margin: 2.125em 0 0 -0.25em;
		transform-origin: 50% 1em;
		background-color: #7cd;
		border: 0.325em solid #555;
		border-radius: 80% 80% 80% 60% / 60% 60% 60% 80%;
		box-shadow: inset -0.375em 0.25em #6bc;
		animation: swing 500ms -500ms infinite linear alternate;
	}

	.arm.back {
		z-index: -1;
		margin: 1.75em 0 0 -4em;
		background-color: #6bc;
		animation-name: swing2;
		animation-delay: -1000ms;
	}

	/* Animation */

	@keyframes swing {
		0% {
			transform: rotate(-60deg);
		}

		100% {
			transform: rotate(10deg);
		}
	}

	@keyframes swing2 {
		0% {
			transform: rotate(-10deg);
		}

		100% {
			transform: rotate(60deg);
		}
	}

	@keyframes bounce {
		0% {
			transform: translateY(0);
		}

		100% {
			transform: translateY(-0.25em);
		}
	}

	@keyframes bounce2 {
		0% {
			transform: rotate(0);
		}

		100% {
			transform: rotate(2deg);
		}
	}
</style>